<template>
	<div class="zhiShi">
		<div class="bfff left-bottom">
			<div class="center flex-start table-head fWrap">
				<div class="c666 f14 disNo">操作日期：</div>
				<el-date-picker
					type="date"
					placeholder="请选择发布日期"
					value-format="YYYY-MM-DD 00:00:00"
					v-model="times"
					:disabled-date="pickerOptions"
				></el-date-picker>
				<div class="c666 f14">标题：</div>
				<div>
					<el-input
						type="text"
						placeholder="请输入标题..."
						v-model="title"
						@keyup.enter.native="searchList"
					/>
				</div>
				<!-- <div class="czName"> -->
				<div class="c666 f14">操作人：</div>
				<el-input type="text" placeholder="请输入操作人..." v-model="people" @keyup.enter.native="searchList" />
				<!-- </div> -->
				<div>
					<el-button class="primary" type="primary" @click="searchList">搜索</el-button>
					<el-button type="primary" plain @click="resetting">重置</el-button>
				</div>
			</div>
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="主题知识库" name="1"></el-tab-pane>
				<el-tab-pane label="企业视频课程库" name="2"></el-tab-pane>
			</el-tabs>
			<div class="table-scrol">
				<div class="table">
					<el-table
						@cell-click="cellClick"
						@select="selectClick"
						@select-all="selectClickAll"
						:data="list"
						style="width: 100%"
					>
						<!-- <el-table-column align="center" type="selection" label="序号" min-width="5%" /> -->
						<el-table-column
							align="center"
							prop="title"
							label="标题"
							show-overflow-tooltip
							min-width="200"
						/>
						<el-table-column
							align="center"
							prop="oldctName"
							label="原分类"
							show-overflow-tooltip
							min-width="150"
						/>
						<el-table-column
							align="center"
							prop="ctName"
							label="新分类"
							show-overflow-tooltip
							min-width="150"
						/>
						<el-table-column align="center" prop="createUser" label="操作人" min-width="100" />
						<el-table-column
							align="center"
							prop="pubTime"
							label="操作日期"
							show-overflow-tooltip
							min-width="200"
						>
							<template #default="{ row }">
								{{ row.pubTime }}
							</template>
						</el-table-column>
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
					</el-table>
				</div>
			</div>
			<div class="bfff pagination-class">
				<v-pagination
					:total="+total"
					v-model:size="pageSize"
					v-model:page="current"
					@pagination="fetchList"
					@paginations="fetchLists"
				></v-pagination>
			</div>
		</div>
	</div>
</template>

<script setup>
import { Search, RefreshRight } from "@element-plus/icons-vue"
import { ElMessage } from "element-plus"
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()

const list = ref([])
const activeName = ref("1")
const people = ref("")

//标题
const title = ref("")
const total = ref(0)
const current = ref(1)
const pageSize = ref(10)
const times = ref("")
//已选中
//二级分类
async function created() {
	const ress = await getAxios(`/knowledge/kbBaiscLog/page?current=1&size=10&type=${activeName.value}`)
	total.value = +ress.total
	list.value = ress.records
}
created()
const handleClick = async event => {
	if (event.props.name == "2") {
		const res = await getAxios(`/knowledge/kbBaiscLog/page?current=1&size=10&type=2`)
		total.value = +res.total
		list.value = res.records
	} else {
		const res = await getAxios(`/knowledge/kbBaiscLog/page?current=1&size=10&type=1`)
		total.value = +res.total
		list.value = res.records
	}
	empty()
}
// function time(times) {
// 	return times.substring(0, 10)
// }

const searchList = async () => {
	const rss = await getAxios(`/knowledge/kbBaiscLog/page`, {
		current: 1,
		size: 10,
		type: activeName.value,
		title: title.value,
		fromTime: times.value,
		userName: people.value,
	})
	total.value = +rss.total
	list.value = rss.records
	// times.value = ""
	// title.value = ""
	// people.value = ""
}
const resetting = () => {
	title.value = ""
	times.value = ""
	people.value = ""
	created()
}

const fetchList = async val => {
	current.value = val
	const res = await getAxios(`/knowledge/kbBaiscLog/page?type=${activeName.value}&current=${val}&size=10`)
	total.value = +res.total
	list.value = res.records
}
const fetchLists = async val => {
	pageSize.value = val
	const res = await getAxios(
		`/knowledge/kbBaiscLog/page?type=${activeName.value}&current=${current.value}&size=${val}`
	)
	total.value = +res.total
	list.value = records
}

//清空
function empty() {
	times.value = ""
	title.value = ""
	people.value = ""
}
function pickerOptions(time) {
	return time.getTime() > Date.now()
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
.zhiShi {
	background-color: #f8f8f8;
	height: 100%;
	overflow-y: scroll;

	:deep(.el-tabs__active-bar) {
		height: 1px;
	}

	:deep(.el-tabs__nav-wrap::after) {
		height: 1px;
	}

	:deep(.el-tabs__header) {
		margin: 0 0 20px 0;
	}

	.left-bottom {
		padding: 30px;

		.table-head2 {
			border: 1px solid #eceef5;
			height: 50px;
			padding: 0 2%;
		}

		.table-head {
			height: 60px;
			@include maxWidth(420) {
				height: 100px;
			}

			:deep(.el-input) {
				margin-right: 10px;
			}

			.primary {
				margin-left: 20px;
				@include maxWidth(768) {
					margin-left: 0;
				}
			}

			.danger {
				color: #ff952c;
			}
		}

		:deep(.el-table) {
			border: 1px solid #eceef5;
		}

		:deep(.el-table th.el-table__cell) {
			background-color: #f4f7fa;
		}

		:deep(.el-table .el-table__cell) {
			height: 60px;
			color: #606266;
		}
	}
}
.pagination-class {
	padding-top: 20px;
	display: flex;
	justify-content: center;
}
:deep(.el-date-editor.el-input) {
	width: 200px;
	@include maxWidth(1400) {
		width: 150px;
	}
	@include maxWidth(1024) {
		width: 100px;
	}
	@include maxWidth(768) {
		display: none;
	}
}
.timi-dis {
	@include maxWidth(650) {
		display: none;
	}
}
:deep(.el-input) {
	width: 200px;
	@include maxWidth(1400) {
		width: 150px;
	}
	@include maxWidth(1024) {
		width: 120px;
	}
	@include maxWidth(900) {
		width: 100px;
	}
	@include maxWidth(768) {
		width: 120px;
	}
	@include maxWidth(500) {
		width: 120px;
	}
	@include maxWidth(420) {
		width: 180px;
	}
}
.disNo {
	@include maxWidth(768) {
		display: none;
	}
}
.czName {
	display: flex;
	@include maxWidth(420) {
		margin: 1vh 0;
	}
}
</style>
